<template>
	<view class="result">
		<view class="result-center">
		  <view class="result-center-icon">
		  	<image src="../../static/checkcircle.png" mode=""></image>
		  </view>
		  <view class="result-center-text">
			  <text v-if="!orderInfo.total_amount">确定成功！</text>
			  <text v-if="!orderInfo.total_amount">感谢您</text>
		  	  <text v-if="orderInfo.total_amount">支付成功！</text>
			  <text v-if="orderInfo.total_amount">感谢您的购买</text>
		  </view>
		</view>
		<view class="result-info">
			<view class="result-info-title">
				<text>￥{{ (orderInfo.total_amount / 100).toFixed(2) >0 ? (orderInfo.total_amount / 100).toFixed(2) :0 }}</text>
			</view>
			<view class="result-info-text">
				<text>应付：￥{{ (orderInfo.total_amount / 100).toFixed(2) >0 ? (orderInfo.total_amount / 100).toFixed(2) :0}}</text>
			</view>
			<view class="result-info-text">
				<text>商户名称：{{ orderInfo.mch_name || ''}}</text>
			</view>
			<view class="result-info-text">
				<text>订单编号：{{orderInfo.trade_no || ''}}</text>
			</view>
			<view class="result-info-text">
				<!--  -->
				<text>下单时间：{{  initTime(orderInfo.pay_time || 0)  || ''}}</text>
			</view>
		</view>
		<view class="result-pay" @click="toBack">
			<text>退出</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				orderInfo:{},
				http:'https://dpay.zazpay.cn', //正式
				// http:'https://test.zazpay.cn', //体验
			}
		},
		onLoad(v){
			if(v.trade_no){
				let that = this
				uni.request({
					url:`${that.http}/xypay/jsapi/query`,
					method:'POST',
					data:{
						mch_no:v.mch_no,
						trade_no:v.trade_no,
						sign:"8a9bd64e6585c6c8016585c6c8980000"
					},
					success(res) {
						console.log(res)
						that.orderInfo = res.data
					}
				})
			}else{
				
			}
			
		},
		methods:{
			toBack(){
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},
			
			initTime(str){
				if(!str) return
			// let str = '20240111140047'
			const n = str.slice(0,4) * 1
			const y =  str.slice(4,6) * 1
			const r =  str.slice(6,8) * 1
			const s = str.slice(8,10) * 1
			const f = str.slice(10,12) 
			const m = str.slice(12,14)* 1
			return (n + '年' + y +'月'+ r + '日 ' + s +':'+ f  + ':' + m) 
				// 
				// if(!time) return
				//      var date = new Date(time * 1000);
				//      var Y = date.getFullYear() + '-';
				//      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				//      var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
							
				//      var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
				//      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
				//      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				//      var strDate = Y + M + D + h + m + s;
				//      console.log('输出内容:', strDate)
			
			}
		}
	}
</script>

<style scoped lang="scss">
	.result{
		&-center{
			width: 100vw;
			height: 350rpx;
			background-color:#42b983 ;
			display: flex;
			align-items: center;
			justify-content: center;
			&-icon{
				image{
					width: 150rpx;
					height: 150rpx;
				}
			}
			&-text{
				color: #fff;
				margin-top: 20rpx;
				margin-left: 50rpx;
				display: flex;
				flex-direction: column;
				text:nth-child(1){
					font-size: 38rpx;
					font-weight: 700;
				}
				text:nth-child(2){
					font-size: 28rpx;
				}
			}
		}
		&-info{
			width: calc(100vw - 64rpx);
			height: 450rpx;
			margin: auto;
			background-color: #ffffff;
			margin-top: -80rpx;
			border-radius: 8rpx;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
			&-title{
				margin: auto;
				width: calc(100% - 20rpx);
				border-bottom: 1rpx solid rgb(227, 227, 2777);
			    padding-bottom: 20rpx;
				font-size: 42rpx;
				text-align: center;
				padding-top: 50rpx;
				font-weight: 700;
			}
			&-text{
			  margin-top: 30rpx;
			  font-size: 24rpx;
			  font-weight: 700;
			  margin-left: 20rpx;
			}
		}
		&-pay{
		   width: calc(100vw - 64rpx);
		   padding: 28rpx 0;
		   background-color:#42b983 ;
		   border-radius: 12rpx;
		   text-align: center;
		   font-weight: 700;
		   color: #fff;
		   margin:auto;
		   margin-top: 100rpx;
		}
	}
</style>